<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<body>
	<ui:composition template="/pages/protected/user/default.xhtml">
		<ui:define name="content">
			<f:metadata>
			  <f:viewParam name="year" value="#{chartMB.year}"/>
			  <f:viewParam name="userid" value="#{chartMB.userId}"/>
			</f:metadata>
			<script type="text/javascript">
			    function extFn() {
			        this.cfg.seriesDefaults = {
			        	rendererOptions: {fillToZero: true},
			        	renderer:$.jqplot.BarRenderer,
			        };
			        this.cfg.axes.xaxis.tickOptions = {
			        		renderer: $.jqplot.CategoryAxisRenderer
			        };
			    }
			</script>
			<h4><h:outputLabel value="#{msgs.invalidID}" rendered="#{chartMB.invalidUserID}" /></h4>
			<h:panelGroup rendered="#{!chartMB.invalidUserID}">
			<h:form >
				<h:selectOneMenu value="#{chartMB.year}">
					<f:selectItems value="#{chartMB.years}" />
				</h:selectOneMenu>
				<h:commandButton value="#{msgs.visit}" action="#{chartMB.yearChanged}" />
			</h:form>
			<p:barChart id="basic" value="#{chartMB.categoryModel}"
				legendPosition="ne" title="#{msgs.transactionStatsHeader}" style="height:500px" 
			extender="extFn" yaxisLabel="&#8721;HUF"/>
			 </h:panelGroup>
		</ui:define>
	</ui:composition>
</body>
</html>